<template>
	<view class="travel-main">
		<view class="empty-zhanwei"></view>
		<view class="segment-list">
			<view class="select-segment">
				<!-- <uni-segmented-control :current="current" :values="items" style-type="text" active-color="#dd524d"
					@clickItem="onClickItem" /> -->
				<top-menu-bar @currentSelect="currentSelect" :menuData="items"></top-menu-bar>
			</view>
			<view class="content">
				<CampingPage v-if="current === 0"></CampingPage>
				<FoodsPageVue v-if="current === 1"></FoodsPageVue>
				<HomestayPageVue v-if="current === 2"></HomestayPageVue>
				<ActivityPage v-if="current === 3"></ActivityPage>
				<near-page v-if="current === 4"></near-page>
			</view>
		</view>
	</view>
</template>

<script>
	import topMenuBar from '@/components/common-components/topMenuBar.vue'
	import nearPage from './travel/nearPage.vue'
	import FoodsPageVue from './travel/foodsPage.vue'
	import HomestayPageVue from './travel/homestay.vue'
	import CampingPage from './travel/camping.vue'
	import ActivityPage from './travel/acvitivityPage.vue'
	export default {
		components: {
			topMenuBar,
			nearPage,
			FoodsPageVue,
			HomestayPageVue,
			CampingPage,
			ActivityPage
		},
		data() {
			return {
				current: 0, // 当前选择的选项卡index
				items: [{
						title: '露营',
					},
					{
						title: '美食',
					},
					{
						title: '民宿',
					},
					{
						title: '活动',
					},
					{
						title: '附近',
						icon: 'https://jyapp-fzg.oss-cn-hangzhou.aliyuncs.com/app/static/image/icons/location1.png'
					}
				],

			}
		},
		methods: {
			// 点击选项卡
			// onClickItem(e) {
			// 	if (this.current !== e.currentIndex) {
			// 		this.current = e.currentIndex
			// 	}
			// },
			currentSelect(data) {
				// console.log(data);
				this.current = data;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.travel-main {
		height: calc(100vh - 320rpx);
		// padding-top: 100rpx;
		// background-color: #66596b;
		
		.empty-zhanwei{
			height: 140rpx;
			// background-color: #005500;
		}
		.segment-list {
			.content {
				margin-top: -20rpx;
			}
		}
	}
</style>